<template>
  <div class="detail" v-if="detail">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        v-for="p in detail.photo"
        :key="p.id"
      >
        <img :style="{width: '100%'}" :src="p.url" alt="">
      </van-swipe-item>
    </van-swipe>

    <div :style="{padding: '6px'}">
      <!-- 标题 -->
      <h3>{{ detail.title }}</h3>
      <!-- 描述 -->
      <div>
        <span :style="{color: 'red', fontWeight: 700}">￥{{ detail.price | money }}</span>
        <span :style="{paddingLeft: '12px', textDecoration: 'line-through'}">￥{{ detail.originPrice | money }}</span>
      </div>
    </div>

    <van-divider>图文详情</van-divider>

    <van-image
      lazy-load
      v-for="img in detail.descContentList"
      :key="img.photo.id"
      :src="img.photo.url"
      :style="{display: 'block'}"
    />

    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="totalAmount | formatNumber" @click="$router.push('/cart')" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" @click="handleAddToCart" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import { getDetail } from '@/api/detail'
export default {
  name: 'Detail',
  data () {
    return {
      detail: null
    }
  },
  computed: {
    ...mapGetters(['totalAmount'])
  },
  async created () {
    const result = await getDetail(this.$route.params.id)
    this.detail = result.detail
  },
  methods: {
    // 将 store 中 mutation 映射到组件的 methods 中来
    ...mapMutations(['addToCart']),
    // addToCart (payload) {
    //   ///
    // },
    handleAddToCart () {
      // 当前选购的商品
      const { id, price, image, title } = this.detail
      const current = {
        id,
        price,
        image,
        title,
        amount: 1
      }
      // 保存到状态中
      // this.$store.commit('addToCart', current)
      this.addToCart(current)
    }
  }
}
</script>

<style lang="less" scoped>

</style>
